<template>
  <div class="page">
    <h3>基本信息</h3>
    <detail-table :list="baseInfo" :info="form"></detail-table>
    <!-- 包场规则 旧数据  isNew === '0'-->
    <div class="mt20 detail-table" v-if="form.type === '4' && form.isNew === '0'">
      <div v-for="(item, index) in form.bookRule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ item['cinemaData']['relationType'] === '-1' ? '全部影院' : item['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + item['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(item, index)" v-if="item['cinemaData']['relationId'] !== '-1'">
                    点击查看
                  </a>
                  <span v-else>--</span>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <!-- 包场规则 新数据 isNew === '1'-->
    <div class="mt20 detail-table" v-if="form.type === '4' && form.isNew === '1'">
      <div v-for="(item, index) in form.bookRule.rule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <!-- <zm-detail-table :list="cinemaInfoList" :info="item"></zm-detail-table> -->
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ form.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : form.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + form.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(form.bookRule['cinemaData']['relationId'])" v-if="form.bookRule['cinemaData']['relationId'] !== '-1'">
                    {{ form.bookRule['cinemaData']['relationName'] || '--' }}
                  </a>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <h3 v-if="!['4', '6', '7'].includes(form.type)">产品信息</h3>
    <detail-table
      :list="productInfo"
      :info="form.product"
      v-if="form.product && !['4', '6', '7'].includes(form.type)"
    ></detail-table>
    <!-- 文旅规则 -->
    <div class="mt20 detail-table" v-if="form.type === '7'">
      <div v-for="(item, index) in form.wenlvRule.list" :key="index">
        <div class="mtb20 fb">{{'活动规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <span v-for="(item1, index1) in wenlvInfoList" :key="index1">
            <tr class="vm wp50" v-if="!(+item.calculationMethod === 2 && ['unitPrice', 'joinCount'].includes(item1.label))">
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ form.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : form.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + form.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type]}}
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </tr>
          </span>
        </table>
      </div>
    </div>
    <!-- 实物销售单 -->
    <div class="mt20 detail-table" v-if="form.type === '6'">
      <div class="fb mb10">产品信息</div>
      <zm-table-data :data="form.product.productList.list" :columns="productListColumns" :show-page="false"></zm-table-data>
    </div>
    <detail-container
      v-if="extendDetailParams.visible"
      v-model="extendDetailParams.visible"
      :id="extendDetailParams.id"
      :business-id="extendDetailParams.id"
      :is-show-btn="false"
      :type="extendDetailParams.type"
    >
    </detail-container>
    <!-- 影城 -->
    <cinema-detail v-if="cinemaParams.visible" v-model="cinemaParams.visible" :id="cinemaParams.id" :obj="cinemaParams.obj" :is-new="cinemaParams.isNew"></cinema-detail>
  </div>
</template>

<script>
import DetailTable from '@/components/zmDetailTable'
import DetailContainer from '@/components/DetailContainer'
import { base, product, cinemaInfoList, wenlvInfoList, productListColumns } from './const'
import uploadApis from '@/api/src/upload'
import {saveVoucher} from '@/api/src/returnedMoney'
import CinemaDetail from './CinemaDetail'

export default {
  name: 'ReceiveAbleListInfo',
  components: {
    DetailTable,
    DetailContainer,
    CinemaDetail
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    obj: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      base,
      product,
      cinemaInfoList,
      wenlvInfoList,
      form: {
        returnedType: '',
        returnedNo: '',
        returnedTime: '',
        salesmanName: '',
        apartmentId: '',
        customerName: '',
        saleName: '',
        // yetReturnedMoney: '',
        initReturnedMoney: '', // 回款单金额
        balanceAmount: '', // 红冲金额
        validReturnedMoney: '', // 有效回款金额
        // residue: '',
        returnedMoney: '',
        returnedPeriods: '',
        payer: '',
        exchangeMeans: '',
        dealBank: '',
        gathering: '',
        transactionNo: '',
        returnedRemark: ''
      },

      extendDetailParams: {
        visible: false,
        id: '',
        type: '',
        obj: {}
      },
      cinemaParams: {
        visible: false,
        obj: {},
        id: '',
        isNew: '0',
        idx: 0
      }
    }
  },
  computed: {
    baseInfo () {
      return this.base(this)
    },
    productInfo () {
      return this.product(this)
    },
    productListColumns () {
      return productListColumns(this)
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.form = Object.assign({}, this.form, this.obj)
      // this.form.productList = JSON.parse(this.form.productList)
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onExport () {
      if (!this.form.accessory) {
        this.$message.warning('没有找到下载的资料,确认是否有上传')
        return
      }
      let iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.src = this.form.accessory
      iframe.onload = function () {
        document.body.removeChild(iframe)
      }
      document.body.appendChild(iframe)
    },
    async fileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      // this.$set(this.form, 'enclosureUrl', res.url)
      const _data = {
        id: this.form.id,
        enclosureUrl: res.url,
        enclosureName: res.name
      }
      await saveVoucher(_data)
      this.$emit('after-save')
      return res.url
    },
    onCinemaDetail (item, index) {
      // 查看影院信息
      this.cinemaParams = {
        visible: true,
        isNew: this.form.isNew,
        id: this.form.isNew === '1' ? item : '',
        obj: this.form.isNew === '0' ? item.cinemaData : {},
        idx: index
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 50%;
}
.el-form-item__label {
  background: #ccc !important;
}
$color: #fafafa;
$height: 40px;
.detail-table {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    tr {
      display: inline-block;

      td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 10px;
      }
    }
  }
  &__name {
    // height: $height;
    background: $color;
    text-align: center;
    width: 200px;
    display: inline-block;
    min-height: $height;
    line-height: 40px;
    &__icon {
      left: 10px;
    }
  }
  &__value {
    width: calc(100% - 205px);
    display: inline-block;
    min-height: $height;
    line-height: 30px;
  }
}
</style>
